<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no">
		<title>用户昵称</title>
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />

	</head>

	<body class="bg_f8">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">用户昵称</h1>
		</header>
		<div class="mui-content bg_f8">
			<div class="room_main padding_12">
				<div class="room_left room_list mg_top15">
					<p class="text-center color_55 mg_tb10">下午1：52</p>
					<div class="room_info flex">
						<img class="room_head" src="images/index_head.png" />
						<span class="room_text">你好，在吗？</span>
					</div>
				</div>

				<div class="room_right room_list mg_top15">
					<div class="room_info flex">
						<span class="room_text">请问上北京需要办理哪些资料才可以复工呢？</span>
						<img class="room_head" src="images/index_head.png" />
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="room_msg chatbox-tools">
				<img id="chatbox-emoji-btn" src="images/room_silme.png" alt="" />
				<!--<img src="images/room_key.png" />-->
				<span class="rongcloud-text" contenteditable="true" id="sedmsg"> </span>
				<!--<input type="text" name=""  value="" />-->
				<span class="sedmsg">发送</span>
				<img class="more_btn" src="images/room_add.png" alt="" />
				<div class="chatbox-emoji-panel absolute" id="chatbox-emoji-panel"></div>
			</div>
			<div class="add_more clearfix">
				<div>
					<label for="file" class=" "><img src="images/room_pic.png"/></label>
					<input type="file" name="" hidden="hidden" id="file" value="" />

					<p>图片</p>
				</div>
				<div>
					<img src="images/room_tel.png" />
					<p>语音通话</p>
				</div>
				<div>
					<img src="images/room_video.png" />
					<p>视频通话</p>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.ronghub.com/RongIMLib-2.5.5.min.js"></script>
		<script src="http://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
		<script src="js/exif.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/msg.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.ronghub.com/RongCallLib-3.1.5.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#chatbox-emoji-panel').hide()
				$(".more_btn").click(function() {
					if($('.add_more').hasClass('show')) {
						$('.add_more').hide(200)
						$('.add_more').removeClass('show')
					} else {
						$('.add_more').show(200)
						$('.add_more').addClass('show')
					}

				})

				var id = localStorage.getItem('id')

				$(document).on('click', '#chatbox-emoji-btn', function() {
					$('#chatbox-emoji-panel').fadeIn(200)
				})
				$(document).on('click', '#chatbox-emoji-panel span', function() {
					var emoji_text = $(this).attr('name')
					$('#sedmsg').append(emoji_text)
					$('#chatbox-emoji-panel').fadeOut(200)
				})
				
				var msglist = JSON.parse(localStorage.getItem('msgarr'))
//              console.log(JSON.parse(msglist))
				if(msglist.length){
					var html='';
					msglist.forEach(function(k,v){
						html+='<div class="room_info flex">'+
						'<span class="room_text">'+k.content+'</span>'+
						'<img class="room_head" src="'+k.head+'" />'+
					'</div>'
					})
					$('.room_list').appendTo(html)					
				}
				

				//发送消息
				var id = getUrlParam('id');
				var head = getUrlParam('head')
				var name = getUrlParam('name')
				$('.mui-title').html(name)
				$('.sedmsg').click(function() {

					sendMessage(id, head)
				})

				$('#sedmsg').click(function() {
					$('.add_more').hide(200)
					$('.add_more').removeClass('show')
				})

				function emoji() {
					var config = {
						size: 24, // 大小, 默认 24, 建议18 - 58
						url: "//f2e.cn.ronghub.com/sdk/emoji-48.png", // Emoji 背景图片
						lang: "zh", // Emoji 对应名称语言, 默认 zh
					};
					RongIMLib.RongIMEmoji.init(config);

					var emojiList = RongIMLib.RongIMEmoji.list.map(function(data) {
						return data.node;
					});
					var strHtml = '';
					$.each(emojiList, function(k, v) {

						strHtml += '<a class="emojiItem" code="' + v.unicode + '">' + v.outerHTML + '</a>';
					});
					$('#chatbox-emoji-panel').append(strHtml);
				}
				emoji()

				//图片上传
				$('#file').change(function(e) {

					var _this = $(this)[0],
						_file = _this.files[0],
						fileType = _file.type;
					console.log(_file.size);
					if(_file.size * 1 >= 5000000) {
						$.alert('文件过大，请重新上传！', function() {
							return false;
						});
						return false;
					}
					var Orientation = null;
					if(/image\/\w+/.test(fileType)) {
						// $.notify.show('图片上传中...', function(){});
						msg("正在上传，请稍后");
						var fileReader = new FileReader();

						fileReader.readAsDataURL(_file);

						EXIF.getData(_file, function() { /*获取图片方向信息*/
							EXIF.getAllTags(this);
							Orientation = EXIF.getTag(this, 'Orientation') || '';

						});
						fileReader.onload = function(event) {
							var result = event.target.result; //返回的dataURL
							var image = new Image();
							image.src = result;
							image.onload = function() { //创建一个image对象，给canvas绘制使用
								var cvs = document.createElement('canvas');
								var scale = 1;
								if(this.width > 500 || this.height > 500) { //1000只是示例，可以根据具体的要求去设定
									if(this.width > this.height) {
										scale = 500 / this.width;
									} else {
										scale = 500 / this.height;
									}
								}
								cvs.width = this.width * scale;
								cvs.height = this.height * scale; //计算等比缩小后图片宽高
								var ctx = cvs.getContext('2d');
								var newImageData = null;
								if(navigator.userAgent.match(/iphone/i)) {
									//                  console.log('iphone');
									//alert(expectWidth + ‘,‘ + expectHeight);
									//如果方向角不为1，都需要进行旋转 added by lzk
									if(Orientation != "" && Orientation != 1) {
										// $.alert('旋转处理');
										switch(Orientation) {
											case 6: //需要顺时针（向左）90度旋转
												// $.alert('需要顺时针（向左）90度旋转');
												rotateImg(this, 'left', cvs);
												break;
											case 8: //需要逆时针（向右）90度旋转
												// $.alert('需要顺时针（向右）90度旋转');
												rotateImg(this, 'right', cvs);
												break;
											case 3: //需要180度旋转
												// $.alert('需要180度旋转');
												rotateImg(this, 'right', cvs); //转两次
												rotateImg(this, 'right', cvs);
												break;
										}
									}

									/*var mpImg = new MegaPixImage(image);
									 mpImg.render(canvas, {
									 maxWidth: 800,
									 maxHeight: 1200,
									 quality: 0.8,
									 orientation: 8
									 });*/
									ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
									newImageData = cvs.toDataURL(fileType, 0.8);
								} else if(navigator.userAgent.match(/Android/i)) { // 修复android
									// var encoder = new JPEGEncoder();
									// newImageData = encoder.encode(ctx.getImageData(0, 0, cvs.width, cvs.height), 80);

									ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
									newImageData = cvs.toDataURL(fileType, 0.8);
								} else {
									// $.alert(Orientation);
									if(Orientation != "" && Orientation != 1) {
										// $.alert('旋转处理');
										switch(Orientation) {
											case 6: //需要顺时针（向左）90度旋转
												// $.alert('需要顺时针（向左）90度旋转');
												rotateImg(this, 'left', cvs);
												break;
											case 8: //需要逆时针（向右）90度旋转
												// $.alert('需要顺时针（向右）90度旋转');
												rotateImg(this, 'right', cvs);
												break;
											case 3: //需要180度旋转
												// $.alert('需要180度旋转');
												rotateImg(this, 'right', cvs); //转两次
												rotateImg(this, 'right', cvs);
												break;
										}
									}
									ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
									newImageData = cvs.toDataURL(fileType, 0.8);

								}

								// ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
								// var newImageData = cvs.toDataURL(fileType, 0.8);   //重新生成图片，<span style="font-family: Arial, Helvetica, sans-serif;">fileType为用户选择的图片类型</span>
								var sendData = newImageData.replace("data:" + fileType + ";base64,", '');
								console.log(sendData)
								upImg(sendData);
							}

						}
					} else {
						// $.notify.show('请选择图片格式文件', {placement: 'center'});
						$.alert("请选择图片格式文件")
					}
				});

				function upImg(sendData) {
					var formData = new FormData();
					var fils = document.getElementById('file').files[0]
					console.log(fils)
					formData.append('file', fils)
					$.ajax({
						//				headers:{'token':localStorage.getItem('user_token')},
						type: 'post',
						url: urlcom + "upload/image",
						data: formData,
						dataType: 'json',
						contentType: false,
						processData: false,
						success: function(res) {
							console.log(res)
							if(res.code == 0) {
								sendImg(1, res.data.pictureName, sendData, head);
							}
							//					$('#sedmsg').append('<a href="javascript:;"><img class="msg_img" data-val="'+res.data.show_url+'" src="'+res.data.show_url+'"/></a></a>');

						},
						error: function() {}
					})
				}
				
             
			})
		</script>
	</body>

</html>